:root {
        --primary: #2c3e50;
            --secondary: #3498db;
                --light: #ecf0f1;
                    --dark: #2c3e50;
                        --accent: #e74c3c;
                            --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

* {
        margin: 0;
            padding: 0;
                box-sizing: border-box;
}

body {
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
                color: var(--dark);
                    background-color: #f8f9fa;
                        padding: 20px;
                            max-width: 1200px;
                                margin: 0 auto;
}

header {
        text-align: center;
            padding: 2rem 0;
                border-bottom: 1px solid #eee;
                    margin-bottom: 2rem;
}

h1 {
        color: var(--primary);
            font-size: 2.5rem;
                margin-bottom: 0.5rem;
}

.category-grid {
        display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 25px;
                    padding: 10px;
}

.category-card {
        background: white;
            border-radius: 10px;
                padding: 25px;
                    box-shadow: var(--shadow);
                        transition: transform 0.3s ease;
                            border-top: 4px solid var(--secondary);
}

.category-card.accent {
        border-top-color: var(--accent);
}

.category-card:hover {
        transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

h2 {
        color: var(--primary);
            margin-bottom: 1.2rem;
                padding-bottom: 0.5rem;
                    border-bottom: 1px dashed #ddd;
}

ul {
        list-style-type: none;
}

li {
        margin-bottom: 0.8rem;
}

a {
        text-decoration: none;
            color: var(--secondary);
                font-weight: 500;
                    display: block;
                        padding: 8px 12px;
                            border-radius: 5px;
                                transition: all 0.2s;
}

a:hover {
        background: rgba(52, 152, 219, 0.1);
            padding-left: 15px;
}

footer {
        text-align: center;
            margin-top: 3rem;
                padding: 1.5rem;
                    color: #7f8c8d;
                        border-top: 1px solid #eee;
}

#themeToggle {
        position: absolute;
            top: 20px;
                right: 20px;
                    background: none;
                        border: 1px solid #ddd;
                            padding: 5px 10px;
                                border-radius: 20px;
                                    cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
        .category-grid {
                    grid-template-columns: 1fr;
        }
            
                h1 {
                            font-size: 2rem;
                }
}
                }
        }
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}